import React from "react";
import "./UserPage.scss";
import { Link } from "react-router-dom";
import { Collapse, Card } from "antd";
const { Meta } = Card;

const { Panel } = Collapse;

function callback(key) {
  // console.log(key);
}

export default function UserSongList(props) {
  return (
    <div id="userSongList">
      <div className="title">
        歌单<span>{`(${3})`}</span>
      </div>
      <div className="menu">
        <Collapse defaultActiveKey="" onChange={callback}>
          <Panel header="我的歌单" key="1">
            <p>暂无</p>
          </Panel>
          <Panel header="收藏歌单" key="2">
            <div style={{display:'flex',flexWrap:'wrap',justifyContent:"space-between"}}>
            {props.menu &&
              props.menu.map((item, index) => {
                return (
                  <Link key={item + index} to="">
                    <div>
                      <Card
                        hoverable
                        style={{ width: 160,margin:'10px 10px'}}
                        cover={
                          <img
                            alt="example"
                            src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                          />
                        }
                      >
                        <Meta
                          title="Europe Street beat"
                          description="www.instagram.com"
                        />
                      </Card>
                    </div>
                  </Link>
                );
              })}
              </div>
          </Panel>
          <Panel header="喜欢的歌手" key="3">
            <p>我自己</p>
          </Panel>
        </Collapse>
      </div>
    </div>
  );
}
